<template>
  <div class="root fill">
    <div class="section">
      <div class="title">推荐歌单</div>
      <div class="content">
        <AlbumUnit :size="150" v-for="(item, index) in recommendPlayList" :key="index" :meta="item"/>
      </div>
    </div>
    <div class="section">
      <div class="title">最新专辑(内地)</div>
      <div class="content">
        <AlbumUnit :size="150" v-for="(item, index) in newAlbumType1" :key="index" :meta="item"/>
      </div>
    </div>
    <div class="section">
      <div class="title">最新专辑(港台)</div>
      <div class="content">
        <AlbumUnit :size="150" v-for="(item, index) in newAlbumType2" :key="index" :meta="item"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {qqMusicApi} from "@/network/qqmusic"
import AlbumUnit from "@/components/albumUnit/AlbumUnit.vue";
import {Component} from "vue-property-decorator";
import Vue from "vue";
import {SongListItem} from "@/ts.d/classes/SongListItem";
import {AlbumItem} from "@/ts.d/classes/AlbumItem";

@Component({
  components: {AlbumUnit},
})
export default class Recommend extends Vue {
  recommendPlayList: SongListItem[] = []
  newAlbumType1: AlbumItem[] = []  // 内地
  newAlbumType2: AlbumItem[] = []  // 港台

  mounted() {
    this.fetchRecommendList()
    this.fetchNewAlbumType1()
    this.fetchNewAlbumType2()
  }

  fetchRecommendList(): void  {
    qqMusicApi.getRecommendPlayList().then(ret => {
      this.recommendPlayList = ret.data.list.map((item: any) => ({
        cover: item.cover,
        title: item.title,
        listenCount: item.listen_count,
        userName: item.username,
        creator: item.creator,
        mid: item.content_id,
        type: "songList"
      }))
    })
  }

  fetchNewAlbumType1() {
    qqMusicApi.getNewAlbum(1).then((ret: any)=>{
      this.newAlbumType1 = ret.data.list.map((item: any)=> new AlbumItem(item.name,item.mid, item.singers, item.singers[0].name, 0))
    })
  }

  fetchNewAlbumType2() {
    qqMusicApi.getNewAlbum(2).then((ret: any)=>{
      this.newAlbumType2 = ret.data.list.map((item: any)=> new AlbumItem(item.name,item.mid, item.singers, item.singers[0].name, 0))
    })
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
  .root{
    overflow-y: auto;
    .section{
      margin: $mn 0;
      .title{
        padding: $pn;
        font-size: 30px;
        font-weight: 600;
      }
    }

  }
</style>
